<!doctype html>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf8">
<style type="text/css">
    .wrap{

        width:400px;
        height: 200px;
        margin: 0 auto;
        text-align: center;
        margin-top: 200px;

    }
    .wrap select{
        width:130px;
        height: 30px;
    }
</style>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<body>
<div class="wrap">
    <select id="province">
    </select>
    <select id="city">
    </select>
</div>
<script type="text/javascript">

function getCityData () {
    $("#city").empty();
    var pid = $("#province").val();
    $.ajax({
        url:"/getCitys?pid="+pid,
        dataType:"json",
    }).done(function (data) {
        for (var i in data){
            $("#city").append($("<option value='"+data[i].id+"'>"+data[i].name+"</option>"));

        }
    });
    
}

    $.ajax({
        url:"/getProvinces",
        dataType:"json",
    }).done(function (data) {
        for (var i in data){
            var provinceData =data[i];
            $("#province").append($("<option value='"+data[i].id+"'>"+data[i].name+"</option>"));
        }
        getCityData();
    });

    $("#province").change(function(){
       getCityData()
    });

</script>



</body>
</html>
